<template>
	<view :style="styles" class="zy-row mdx-form-item">
		<text>{{title}}</text>
		<input :value="inputValue" @input="onInput" :type="type"  :placeholder="placeholder">
	</view>
</template>

<script>
	/**
	 * v-tabs
	 * @property {Number,String} value 输入框内容
	 * @property {String} title 标题
	 * @property {String} placeholder 输入框占位符
	 * @property {String} type input类型
	 * @property {String} styles 自定义样式
	 *
	 */
	export default {
		name:"mdx-from-input",
		props:{
			value: {
			  type: [Number,String],
			  default: ""
			},
			title:{
				type: String,
				default: "标题"
			},
			placeholder:{
				type: String,
				default: "请输入内容"
			},
			type:{
				type: String,
				default: "text"
			},
			styles:{
				type: String,
				default: ""
			}
		},
		data() {
			return {
				inputValue:""
			};
		},
		watch:{
			value(newVal){
				this.inputValue = newVal
			}
		},
		methods:{
			onInput(e){
				let {value} = e.detail
				this.$emit('input',value)
			}
		}
	}
</script>

<style lang="scss">
	
	.zy-row{
		display: flex;
		flex-direction: row;
	}
	
	.mdx-form-item{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx 24rpx;
		width: 694rpx;
		height: 88rpx;
		background: #F9F9F9;
		border-radius: 12rpx;
		margin: 0 auto;
		text{
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
		}
	}
</style>